<template>
  <div>
    <div class="crumbs">
      <el-page-header title="返回" content="上一页" @click="go" />
    </div>
    <!-- 查看关卡 -->
    <div v-if="IsChack == 0" class="describe">
      <el-descriptions class="margin-top" title="关卡详情" :column="3" border>
        <template #extra>
          <el-button @click="Eupdate" type="primary">修改</el-button>
        </template>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">关卡名</div>
          </template>
          {{ Ename }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">关卡数量</div>
          </template>
          {{ ECount }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">关卡题目数量(关卡平均题目数)</div>
          </template>
          {{ EquestionCount }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">通关条件(百分比用0.1代替)</div>
          </template>
          {{ Econdition }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">通关时间(分钟)</div>
          </template>
          {{ Etime }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">关卡难度(关卡最大难度)</div>
          </template>
          {{ Elv }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <!-- 查看关卡 -->
    <!-- 修改关卡 -->
    <div v-if="IsChack == 1" class="describe">
      <el-descriptions class="margin-top" title="关卡详情" :column="3" border>
        <template #extra>
          <el-button @click="Esave" type="primary">保存</el-button>
        </template>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">关卡名</div>
          </template>
          <el-input v-model="Ename" placeholder="关卡名" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">关卡层数</div>
          </template>
          <el-input-number
            disabled
            v-model="ECount"
            :min="1"
            :max="10000"
            @change="handleChange"
          />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">关卡题目数量(关卡平均题目数)</div>
          </template>
          <el-input-number
            disabled
            v-model="EquestionCount"
            :min="1"
            :max="10000"
            @change="handleChange"
          />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">通关条件(百分比用0.1代替)</div>
          </template>
          <el-input-number v-model="Econdition" :step="0.1" :min="0" :max="1" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">通关时间(分钟)</div>
          </template>
          <el-input v-model="Etime" placeholder="通关时间" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">关卡难度(不可超过关卡最大难度)</div>
          </template>
          <el-input-number
            v-model="Elv"
            :min="1"
            :max="10"
            @change="handleChange"
          />
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <!-- 修改关卡 -->
    <!-- 替换题目 -->
    <el-drawer v-model="drawer" direction="rtl" size="30%">
      <strong style="font-size: 25px">替换题目</strong>
      <div style="float: right; padding-right: 15px">
        <el-button @click="replacesave">保存</el-button>
      </div>
      <div class="describe">
        <el-scrollbar height="600px">
          <div
            v-for="(item, index) in replacequestions"
            :key="item.id"
            class="demo-collapse"
          >
            <el-tag>{{ item.label }}</el-tag>
            <el-collapse v-model="activeName" :accordion="true">
              <el-checkbox v-model="tchecked[index]" size="large" />
              <el-collapse-item :title="item.name" :name="item.id">
                <template v-for="(item3, index) in item.chilren" :key="index">
                  <div v-if="item3.IsRigh == 1">
                    <span>正确答案：{{ item3.option }}</span>
                  </div>
                </template>
                <el-collapse
                  accordion
                  v-for="(item2, index) in item.chilren"
                  :key="item2.index"
                >
                  <div>
                    <span>{{ index + 1 + " . " + item2.option }}</span>
                  </div>
                </el-collapse>
              </el-collapse-item>
            </el-collapse>
          </div>
        </el-scrollbar>
      </div>
    </el-drawer>
    <!-- 替换题目 -->
    <div class="Task">
      <strong>关卡内容</strong>
      <el-button plain type="primary" @click="replace" style="float: right"
        >替换题目</el-button
      >
      <div class="drawer">
        <el-scrollbar height="400px">
          <div
            v-for="(item, index) in questions"
            :key="item.id"
            class="demo-collapse"
          >
            <el-tag>{{ item.label }}</el-tag>
            <el-collapse v-model="activeName" :accordion="true">
              <el-checkbox v-model="checked[index]" size="large" />
              <el-collapse-item :title="item.name" :name="item.id">
                <template v-for="(item3, index) in item.chilren" :key="index">
                  <div v-if="item3.IsRigh == 1">
                    <span>正确答案：{{ item3.option }}</span>
                  </div>
                </template>
                <el-collapse
                  accordion
                  v-for="(item2, index) in item.chilren"
                  :key="item2.index"
                >
                  <div>
                    <span>{{ index + 1 + " . " + item2.option }}</span>
                  </div>
                </el-collapse>
              </el-collapse-item>
            </el-collapse>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import router from "@/router";
import { defineComponent, reactive, toRefs } from "vue";
import { DateliEmigratedChilrens } from "@/utils/Exam/emigrted/dateliEmigratedChilrens";
import { ElMessage } from "element-plus";
export default defineComponent({
  setup() {
    const data = reactive<DateliEmigratedChilrens>({
      Ename: "XXX关卡",
      ECount: 10,
      EquestionCount: 20,
      Econdition: 0.6,
      Etime: "30",
      Elv: 3,
      IsChack: 0,
      checked: [],
      tchecked: [],
      drawer: false,
      questions: [
        {
          id: 1,
          label: "XX类型",
          name: "XXXXXXXXXXXXX问题？",
          chilren: [
            {
              id: 2,
              option: "XXdsadsadawdawsd",
              IsRigh: 0,
            },
            {
              id: 3,
              option: "XXX",
              IsRigh: 0,
            },
            {
              id: 4,
              option: "XXXX",
              IsRigh: 1,
            },
            {
              id: 5,
              option: "XXXXX",
              IsRigh: 0,
            },
          ],
        },
        {
          id: 6,
          label: "XX类型",
          name: "XXXXXXXXXXXXX问题？",
          chilren: [
            {
              id: 7,
              option: "XX",
              IsRigh: 0,
            },
            {
              id: 8,
              option: "XXX",
              IsRigh: 0,
            },
            {
              id: 9,
              option: "XXXX",
              IsRigh: 1,
            },
            {
              id: 10,
              option: "XXXXX",
              IsRigh: 0,
            },
          ],
        },
        {
          id: 11,
          label: "XX类型",
          name: "XXXXXXXXXXXXX问题？",
          chilren: [
            {
              id: 12,
              option: "XX",
              IsRigh: 0,
            },
            {
              id: 13,
              option: "XXX",
              IsRigh: 0,
            },
            {
              id: 14,
              option: "XXXX",
              IsRigh: 1,
            },
            {
              id: 15,
              option: "XXXXX",
              IsRigh: 0,
            },
          ],
        },
      ],
      replacequestions: [
        {
          id: 1,
          label: "XX类型",
          name: "XXXXXXXXXXXXX问题？",
          chilren: [
            {
              id: 2,
              option: "XXdsadsadawdawsd",
              IsRigh: 0,
            },
            {
              id: 3,
              option: "XXX",
              IsRigh: 0,
            },
            {
              id: 4,
              option: "XXXX",
              IsRigh: 1,
            },
            {
              id: 5,
              option: "XXXXX",
              IsRigh: 0,
            },
          ],
        },
        {
          id: 6,
          label: "XX类型",
          name: "XXXXXXXXXXXXX问题？",
          chilren: [
            {
              id: 7,
              option: "XX",
              IsRigh: 0,
            },
            {
              id: 8,
              option: "XXX",
              IsRigh: 0,
            },
            {
              id: 9,
              option: "XXXX",
              IsRigh: 1,
            },
            {
              id: 10,
              option: "XXXXX",
              IsRigh: 0,
            },
          ],
        },
        {
          id: 11,
          label: "XX类型",
          name: "XXXXXXXXXXXXX问题？",
          chilren: [
            {
              id: 12,
              option: "XX",
              IsRigh: 0,
            },
            {
              id: 13,
              option: "XXX",
              IsRigh: 0,
            },
            {
              id: 14,
              option: "XXXX",
              IsRigh: 1,
            },
            {
              id: 15,
              option: "XXXXX",
              IsRigh: 0,
            },
          ],
        },
      ],
    });
    const methods = {
      go() {
        router.go(-1);
      },
      Eupdate() {
        data.IsChack = 1;
      },
      Esave() {
        ElMessage.success("修改成功");
        router.go(-1);
      },
      replace() {
        data.drawer = true;
      },
      replacesave() {
        data.drawer=false
      },
    };
    return {
      ...toRefs(data),
      ...methods,
    };
  },
});
</script>
<style scoped>
.crumbs {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
  margin: 15px;
  background-color: white;
  width: 94%;
}
.describe {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
  margin: 15px;
  background-color: white;
  width: 94%;
}
.chilren {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
  margin: 15px;
  background-color: white;
  width: 94%;
}
.add {
  float: right;
  margin: 10px;
}
.Task {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
  margin: 15px;
  background-color: white;
  width: 94%;
}
.drawer {
  width: 94%;
  padding: 20px;
  margin: 15px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}
</style>

